<template>
	<view class="container">
		<view class="ptb_11 bc_fff">
			<u-tabs :list="tabsList" lineColor="#FE5A1C" itemStyle="width: 33.33%;padding: 0 0 12rpx;"
				inactiveStyle="color: #999999" lineWidth="66rpx" lineHeight="10rpx" @change="handleChangeTab"></u-tabs>
		</view>
		<view class="plr_12">
			<view class="br_8 bc_fff plr_12 mt_8" v-for="data,index in dataList" :key="index">
				<view class="ptb_12 fx aic jcb bob_1 boc_grey">
					<text>{{data.createTime||''}}</text>
					<text>{{data.orderStatusStr||''}}</text>
				</view>
				<view class="ptb_12 bob_1 boc_grey">
					<view class="fx fx_nw">
						<view class="fx_sh">
							<CustomImage width="160rpx" height="160rpx" radius="8rpx"
								:src="getStaticUrl(data.orderInfoList[0].coverImageUrl||data.orderInfoList[0].image)"
								mode="aspectFit" />
						</view>
						<view class="ml_12 fx_1 flow_h">
							<view style="display: flex;">
								<view class="fz_14 fe" style="width: 70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{data.orderInfoList[0].productName||''}} </view>
								<view style="color: red;margin-left: 20rpx;" v-if="data.orderType==7"> 抽奖订单</view>
								
							</view>

							<view class="fz_12 fc_999 mt_4 lh_12 height_12">{{productRuleStr(data.orderInfoList[0])}}
							</view>
							<view class="fz_12 fc_999 mt_4 lh_12 height_12">x{{data.orderInfoList[0].payNum||1}}</view>
							<view class="fz_16 fb mt_4 fc_zhured mt_2">
								<text class="fb">{{data.orderInfoList[0].integral||0}}积分</text>
								<text class="fz_10">+￥</text>
								<text class="fb">{{data.orderInfoList[0].afterDiscountAmount||0}}</text>
							</view>
						</view>
					</view>
					<view class="fx jce mt_16">
						<text>共{{data.productCount||1}}件商品 总金额</text>
						<text class="ml_8 fc_zhured">{{data.integral||0}}积分+￥{{data.actualAmount||0}}</text>
					</view>
				</view>
				<view class="ptb_8 fx fx_w jce grid_8">
					<button class="custom_btn default lh_28 plr_22 br_18 fz_14" @click="handleDetail(data)">查看详情
					</button>
				</view>
			</view>
			<view class="pt_16" v-if="!loading&&dataList.length">
				<u-loadmore :status="loadingStatus" />
			</view>
		</view>
	</view>
</template>

<script>
	import CustomImage from '@/components/Image'
	import api from '@/service/config/api.js'
	import dataMixin from '@/mixins/data.js'
	import {
		getStaticUrl
	} from '@/utils/index.js'
	export default {
		mixins: [dataMixin],
		components: {
			CustomImage
		},
		data() {
			return {
				tabsList: [{
					name: '全部',
				}, {
					name: '待发货',
					orderStatus: 10
				}, {
					name: '已完成',
					orderStatus: 12
				}],
				listUrl: '/order/api/order/pageList',
				dataList: [],
				params: {
					orderType: 6,
				}
			}
		},
		computed: {
			getStaticUrl() {
				return (src) => getStaticUrl(src)
			},
			productRuleStr() {
				return item => item.productRule ? JSON.parse(item
						.productRule).map(item1 => item1.value).join(' ') :
					''
			}
		},
		onShow() {
			this.getData(true)
		},
		onHide() {
			uni.pageScrollTo({
				scrollTop: 0, //距离页面顶部的距离
				duration: 0
			});
		},
		methods: {
			handleChangeTab({
				orderStatus
			}) {
				let params = {
					orderType: 6,
					...orderStatus ? {
						orderStatus
					} : {}
				}
				this.params = params
				this.getData(true)
			},
			handleDetail(data) {
				uni.navigateTo({
					url: '/pages/person/pages/order_detail?id=' + data.id
				})
			}
		},
	}
</script>

<style lang="scss">
	.container {}
</style>